<template>
  <div class="platform">
    <!-- logo -->
    <img class="logo" src="@/assets/platform/logo.png" alt="" />
    <!-- 标题 -->
    <div class="title">
      <span>量准MetaSPR生物芯片药物筛选服务</span>
      <!-- <span class="line"></span> -->
      <img src="@/assets/platform/1.png" alt="" />
    </div>
    <!-- 公司简介介绍 -->
    <div class="content">
      <div class="brief">
        量准成立于2016年12月，是一家包括研发、制造、销售全链的公司。
      </div>
      <div class="brief">
        量准以“芯片生物测微技术”为主打，目前办公地点分布于上海、武汉、杭州，在武汉光谷有超过500平方米的研发实验室，并已于上海金山工业区投资建设近1000平方米的工厂，量准专注于无标记生物大分子新药筛选产品以及创新体外快速诊断智能化产品的研发生产，已经拥有包括纳米等离子光学芯片设计和制造等在内的近百项世界领先技术专利。
      </div>
      <div class="brief">
        量准的MetaSPR技术是将蛋白或抗体固定在芯片上，通过无标记技术大规模研究分子间相互作用，如蛋白质-蛋白质、蛋白质-抗体、蛋白质-多肽和蛋白质-DNA间相互作用，筛选与多种靶分子
        ( 如核酸、抗体、酶类、脂多糖和细胞表面受体蛋白等 )
        具有特异性亲和力的一个有效方法，可广泛应用于基因治疗、基因疫苗研究、抗原表位研究、药物筛选与设计、细胞信号传导研究等领域。
      </div>
    </div>
    <!-- 服务特色 -->
    <div class="serve">
      <img class="img" src="@/assets/platform/服务特色.png" alt="" />
      <div class="introduction">
        <div style="margin-bottom: 16px;">
          <p class="flex">
            <img src="@/assets/platform/序号1.png" alt="" />
            <span>独特的纳米超表面等离子共振（MetaSPR）生物芯片技术平台</span>
          </p>
          <div class="explain">
            量准在SPR生物芯片领域研究多年，我们构建的多种生物芯片筛选技术已成功应用于抗体定量、抗体亚型鉴定、亲和力检测、抗体人源化改造、抗原表位分析，抗体对筛选等，在抗体药物筛选、疫苗设计等方面发挥重要作用。量准能为客户提供一站式的抗体药物筛选方案，可根据客户的需求提供灵活有效的筛选服务。
          </div>
        </div>
        <div style="margin-bottom: 16px;">
          <p class="flex">
            <img src="@/assets/platform/序号2.png" alt="" />
            <span>>20种商品化MetaSPR生物修饰芯片</span>
          </p>
          <div class="explain">
            拥有一系列成熟的生物修饰芯片和检测试剂盒，不需要其他偶联试剂，可直接用于蛋白类，抗体类，大分子药物类的检测与筛选评价。
          </div>
        </div>
        <div style="margin-bottom: 16px;">
          <p class="flex">
            <img src="@/assets/platform/序号3.png" alt="" />
            <span>MetaSPR生物芯片的抗体筛选服务优势</span>
          </p>
          <div class="explain">
            量准可以提供全套的抗体筛选服务，可以从广泛的多物种中筛选所需的具有高特异性和亲和力的单克隆抗体。与传统方法（如ELISA、SPR、BLI技术）相比，MetaSPR技术平台在筛选新型单克隆抗体甚至全人源化抗体方面具有明显优势。此外，来自MetaSPR芯片板还具有以下优点：<br />
            <div>a、无标记技术，简化操作过程，减少试剂用量，降低研发成本。</div>
            <div>b、一步式快速直接检测，缩短检测时间，提高研发效率。</div>
          </div>
        </div>
      </div>
      <img class="circle" src="@/assets/platform/3.png" alt="" />
    </div>
    <!-- 筛选服务 -->
    <div class="screen">
      <img src="@/assets/platform/筛选服务.png" alt="" />
      <div class="screen-box">
        <p v-for="(item, index) in screenList" :key="index" v-html="item"></p>
      </div>
      <img class="screen-img" src="@/assets/platform/4.png" alt="" />
    </div>
    <!-- 服务流程 -->
    <div class="flow">
      <p class="sub-title">
        量准生物提供筛选服务流程：
      </p>
      <table align="center" border="1" cellspacing="0" class="table">
        <thead>
          <tr>
            <td v-for="(item, index) in thead" :key="index">
              {{ item }}
            </td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tbody" :key="index">
            <td>{{ item.project }}</td>
            <td>{{ item.content }}</td>
            <td>{{ item.time }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 说明 -->
    <div class="introduce">
      <div class="explain1" v-for="(item, index) in introduce" :key="index">
        <h3>{{ item.title }}</h3>
        <p>{{ item.cc }}</p>
      </div>
    </div>
    <!-- 服务优势title -->
    <div class="advantage-title">
      <div class="line"></div>
      <img src="@/assets/platform/服务优势.png" alt="" />
      <div class="line"></div>
    </div>
    <!-- 优势介绍 -->
    <div class="advantage">
      <div
        class="advantage-box"
        v-for="(item, index) in advantage"
        :key="index"
      >
        <img :src="item.url" alt="" />
        <p>{{ item.tt1 }}</p>
        <p>{{ item.tt2 }}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenList: [
        "1.抗原抗体定性定量检测服务  量准可为客户提供多种MetaSPR生物芯片定性定量检测试剂盒产品。",
        "2.抗体的亚型鉴定服务 量准提供MetaSPR生物芯片的亚型筛选服务可以识别小鼠或人单克隆抗体的各种亚型，<br/>包括：IgG1,IgG2a,IgG2b,IgG3,IgA,IgM或者IgG1,IgG2,IgG3,IgG4,IgA,IgM等。",
        "3.抗原抗体表位鉴定检测服务 量准的MetaSPR生物芯片可以快速识别不同单克隆抗体与抗原结合的表位信息，为客户的实验项目提供支持。",
        "4.抗体对筛选服务  量准MetaSPR生物芯片可以筛选出亲和力最高，结合能力最强的单克隆抗体对，为客户的检测试剂盒提供最优的抗体对。",
        "5.亲和力筛选服务 量准MetaSPR生物芯片可以实现高通量的抗体亲和力筛选，直接对培养基中或者纯化出的候选抗体进行初步的亲和力排序，筛选出亲和力最高的抗体，对抗体的特异性、动力学特征进行初步的判断，加快对候选药物的选择。"
      ],
      thead: ["服务项目", "服务内容", "服务周期"],
      tbody: [
        {
          project: "抗原抗体定性定量检测服务",
          content: "通过筛选，获得识别抗原的阳性克隆抗体和浓度",
          time: "2-3天"
        },
        {
          project: "抗体的亚型鉴定服务",
          content: "通过筛选，获得各类亚型种类抗体",
          time: "2-3天"
        },
        {
          project: "抗原抗体表位鉴定检测服务",
          content: "通过筛选，对阳性克隆抗体进行位点分析",
          time: "1周"
        },
        {
          project: "抗体对筛选服务",
          content: "通过筛选，阳性克隆抗体进行交叉配对得出最优抗体对",
          time: "1周"
        },
        {
          project: "亲和力筛选服务",
          content: "通过筛选，对抗体的特异性、动力学特征进行初步的判断",
          time: "1周"
        }
      ],
      introduce: [
        {
          title: "客户提供:",
          cc: "纯化的抗原抗体或细胞上清样本"
        },
        {
          title: "交付内容:",
          cc: "完整的实验报告，包括实验流程与数据分析"
        }
      ],
      advantage: [
        {
          url: require("@/assets/platform/基因.png"),
          tt1: "精确、快速的实验过程",
          tt2: "为客户节省时间"
        },
        {
          url: require("@/assets/platform/沙漏.png"),
          tt1: "拥有专业的技术专家",
          tt2: "对筛选的过程精准把控"
        },
        {
          url: require("@/assets/platform/react.png"),
          tt1: "筛选出的抗体或药物",
          tt2: "特异性高，灵敏度高"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
.platform {
  padding: 0px 10px;
  position: relative;
  max-width: 100vw;
  overflow: hidden;
  .send {
    position: relative;
    left: 90%;
    top: 30px;
    z-index: 999;
  }
  .content {
    width: 100%;
    object-fit: contain;
  }
  .logo {
    margin-top: 20px;
    width: 160px;
    height: 24px;
  }

  .title {
    margin: 10px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // white-space: nowrap;
    color: #1582f1;
    font-size: 20px;
    font-weight: 900;
    position: relative;

    .line {
      display: inline-block;
      width: 100%;
      height: 2px;
      background-color: #1582f1;
      margin-left: 34px;
      margin-top: 10px;
    }

    img {
      position: absolute;
      top: -60px;
      right: -6%;
      z-index: 1;
      width: 260px;
      height: 260px;
    }
  }

  .content {
    .brief {
      text-indent: 2em;
      line-height: 24px;
      color: #1382f0;
      font-size: 16px;
    }
  }

  .serve {
    margin-top: 20px;
    padding-top: 10px;
    position: relative;
    z-index: 30;

    .img {
      width: 140px;
      height: 40px;
    }

    .circle {
      position: absolute;
      bottom: -20px;
      left: -34px;
      width: 179px;
      height: 179px;
      z-index: -1;
    }

    .introduction {
      margin-top: 10px;
      padding: 20px 10px;
      border-radius: 8px;
      background-color: #1582f1;
      color: #fff;
      vertical-align: middle;

      .flex {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        img {
          width: 32px;
          height: 32px;
        }

        span {
          font-size: 18px;
          margin-left: 12px;
        }
      }

      .explain {
        line-height: 24px;
        font-size: 15px;
        padding-left: 10px;

        div {
          text-indent: 2em;
        }
      }
    }
  }

  .serve::after {
    content: "";
    width: 387px;
    height: 387px;
    position: absolute;
    top: 0;
    right: -40px;
    z-index: -1;
    background: url("~@/assets/platform/2.png") no-repeat;
    background-size: 387px 387px;
  }

  .screen {
    background-color: #1582f1;
    color: #fff;
    margin-top: 30px;
    padding: 20px 16px;
    border-radius: 8px;
    position: relative;
    z-index: auto;

    img {
      width: 245px;
      margin-bottom: 20px;
    }

    &-box {
      line-height: 24px;
      font-size: 15px;
      padding-left: 5px;

      p {
        margin-bottom: 10px;
        text-indent: 2em;
        // padding-left: 30px;
      }
    }

    .screen-img {
      width: 304px;
      height: 303px;
      position: absolute;
      top: -70px;
      right: -50px;
      z-index: -1;
    }
  }

  .flow {
    .sub-title {
      color: #1582f1;
      font-size: 24px;
      font-weight: 700;
      margin: 30px 0 10px 0;
    }

    .table {
      width: 100%;
      border-color: #1582f1;
      border-radius: 15px;
      text-align: center;
      margin-bottom: 20px;
      border-width: 0;

      thead {
        background-color: #e1f2ff;
        color: #1382f0;
        font-weight: 700;
      }
      td {
        padding: 4px 6px;
      }
      td:last-child {
        width: 100px;
      }

      tr {
        line-height: 24px;
        font-size: 16px;
      }

      thead td:first-child {
        border-radius: 15px 0 0 0;
      }

      thead td:last-child {
        border-radius: 0 15px 0 0;
      }

      tbody tr:last-child {
        td:first-child {
          border-radius: 0 0 0 15px;
        }

        td:last-child {
          border-radius: 0 0 15px 0;
        }
      }
    }
  }

  .introduce {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 30px;

    .explain1 {
      flex: 1;
      font-size: 16px;
      padding: 0 5px;
      h3 {
        font-weight: 700;
        font-size: 20px;
        color: #1582f1;
        margin-bottom: 12px;
      }
    }
  }

  .advantage-title {
    display: flex;
    align-items: center;
    margin-top: 30px;

    .line {
      width: 40%;
      height: 2px;
      background-color: #1582f1;
    }

    img {
      width: 105px;
      height: 35px;
      margin: 0 14px;
    }
  }

  .advantage {
    margin: 30px 0;
    display: flex;
    // justify-content: center;
    // align-items: center;

    .advantage-box {
      flex: 1;
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 10px;

      img {
        width: 32px;
        height: 32px;
        margin-bottom: 10px;
      }

      p {
        font-size: 16px;
        color: #1382f0;
        line-height: 24px;
      }
    }
  }
}
</style>
